<template>
  <div >
    <div id="myChart2" :style="{width: '100%', height: '400px'}"></div>

  </div>

</template>

<script>
  import mainApi from "@/api/main/index";
  export default {
    name: 'hello',
    props:['canvasData'],
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    mounted(){
      this.getUserWeekData();
    },
    methods: {
      getUserWeekData(){
          mainApi.userMouthData().then(res=>{
                console.log(res)
                if(res.code==200){
                  this.userWeekData=res.data
                  this.drawLine();
                }
          });
      },
      drawLine(){
          // 基于准备好的dom，初始化echarts实例
          var rotateData=40;
          let myChart = this.$echarts.init(document.getElementById('myChart2'))
          var self_=this;
       var   option = {
          	tooltip: {
          		trigger: 'axis',
          		// triggerOn: 'click',
          		padding: 0,
          		position: function(pt) {
          			// console.log(pt)
          			// return [pt[0], pt[1]];
          		},
          		formatter: function(params) {
                console.log(params)
                  // return params
          			return '<div style="padding:5px 10px;"> 当月新增用户:'+ params[0].data+'人</div>'
          		}
          	},
          	grid: {
          		top: '10px',
          		left: '3%',
          		right: '4%',
          		bottom: '0%',
          		containLabel: true
          	},

          	xAxis: {
          		type: 'category',
          		 data: self_.userWeekData.date,
          		axisLabel:{
          			rotate:rotateData
          		}
          	},
          	yAxis: {
          		type: 'value',
          		axisLabel: {
          			formatter: '{value}'
          		}
          	},
          	series: [{
          		symbolSize: 8,
          		symbol: '',
          		type: 'line',
          		 data: self_.userWeekData.newUser,
          		itemStyle: {
          			borderWidth: 1,
          			borderColor: '#409EFF',
          			color: '#409EFF'
          		}
          	}]
          };
          // 绘制图表
          myChart.setOption(option);
      }
    }
  }
</script>

<style>
</style>
